<template>
  <div class="goodsinfo-container">
    <!-- 商品轮播区域 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000">
            <mt-swipe-item>
                <img src="https://img.alicdn.com/tps/i4/TB1QtfYN3HqK1RjSZJnSuvNLpXa.jpg_250x250Q90.jpg_.webp" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="https://img.alicdn.com/imgextra/i2/2838892713/O1CN01m752gx1Vub2JqDjZ3_!!2838892713.jpg_430x430q90.jpg" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">华为P30 Pro 旗舰新品，限量抢购</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥5688</del>&nbsp;&nbsp;销售价：<span class="new">￥5488</span>
          </p>
          <p>购买数量：<numbox @getCount="getSelectedCount"></numbox></p> 
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToShopcar">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：SD29322144.4</p>
          <p>库存情况：60件</p>
          <p>上架时间：2019-07-18</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goDesc()">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goComment()">商品评论</mt-button>
      </div>
    </div>
</div>
</template>
<script>

import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
  data(){
    return {
      ballFlag:false,
      selectedCount:1
    }
  },
  methods:{
    goDesc(){
      this.$router.push({name:"goodsDesc"})
    },
    goComment(){
      this.$router.push({name:"goodsComment"})
    },
    addToShopcar(){
      this.ballFlag=!this.ballFlag;
      var goodsInfo={
        id:1,
        count:this.selectedCount,
        price:5499,
        selected:true
      };
      this.$store.commit('addToCar',goodsInfo)
    },
    beforeEnter(el){
      el.style.transform="translate(0,0)";
    },
    enter(el,done){
      el.offsetWidth;

      //获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badegPosition = document.getElementById('badge').getBoundingClientRect();
      const xDist = badegPosition.left-ballPosition.left;
      const yDist = badegPosition.top-ballPosition.top;
      el.style.transform=`translate(${xDist}px,${yDist}px)`;

      el.style.transition="all 0.6s cubic-bezier(.4,-0.3,1,.68)";

      done()
    },
    afterEnter(el){
      this.ballFlag=!this.ballFlag;
    },
    getSelectedCount(count){
      this.selectedCount=count;
      console.log(this.selectedCount)
    }
  },
  components:{
    numbox
  }
};
</script>
<style lang="less" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .new{
    font-size: 16px;
    color: red;
    font-weight: bold;
  }
  .mui-card-footer{
    display: block;
    button{
      margin: 15px 0;
    }
  }
}
.mint-swipe {
  height: 200px;
  text-align: center;
  img{
      height: 100%;
  }
}
 .ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    z-index: 999;
    position: absolute;
    top: 390px;
    left: 146px;
  }
</style>
